<template>
  <div>
    <el-steps :active="active" finish-status="success">
      <el-step title="选择商品分类"></el-step>
      <el-step title="填写商品信息"></el-step>
      <el-step title="填写商品属性"></el-step>
    </el-steps>
    <div class="addGoods-div-01">
      <div v-if="active==1">
        <div class="addGoods-div-02">
          <div class="classify-icon">
            <i class="el-icon-collection-tag"></i> 选择分类
          </div>
        </div>
        <div class="addGoods-div-03">
          <el-cascader-panel :options="options" class="classify-style" size="medium"></el-cascader-panel>
        </div>
      </div>

      <div v-if="active==2">
        这里是填写商品信息
        <div class="addGoods-mokuai2">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="商品名称">
              <el-input v-model="form.name" class="addgoods-input-width"></el-input>
            </el-form-item>
            <el-form-item label="副标题">
              <el-input v-model="form.name" class="addgoods-input-width"></el-input>
            </el-form-item>
            <el-form-item label="商品品牌">
              <el-select v-model="form.region" placeholder="请选择商品品牌">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品介绍">
              <el-input type="textarea" v-model="form.desc" class="addgoods-input-width"></el-input>
            </el-form-item>
            <el-form-item label="运费模板">
              <el-select v-model="form.region" placeholder="请选择运费模板">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品货号">
              <el-input v-model="form.name" class="addgoods-input-width"></el-input>
            </el-form-item>

            <el-form-item>
              <el-form-item label="服务保证">
                <el-checkbox-group v-model="form.type">
                  <el-checkbox label="无忧退货" name="type"></el-checkbox>
                  <el-checkbox label="快速退款" name="type"></el-checkbox>
                  <el-checkbox label="免费包邮" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div v-if="active==3">
        <el-form :inline="true" :model="formInline" class="demo-form-inline addGoods-mokuai3">
          <div>
            <el-form-item label="规格参数组:">
              <el-input v-model="formInline.user" placeholder="手机"></el-input>
            </el-form-item>
          </div>
          <div>
            <div>
              <el-form-item label="尺寸">
                <el-checkbox-group v-model="form.type">
                  <el-checkbox label="M" name="type"></el-checkbox>
                  <el-checkbox label="X" name="type"></el-checkbox>
                  <el-checkbox label="XL" name="type"></el-checkbox>
                  <el-checkbox label="2XL" name="type"></el-checkbox>
                  <el-checkbox label="3XL" name="type"></el-checkbox>
                  <el-checkbox label="4XL" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="颜色">
                <!-- <el-checkbox-group v-model="form.color" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="item in color" :key="item">
                    {{item}}
                    <el-button
                      type="text"
                      style="font-family:'微软雅黑';font-weight:400;color:#0099FF;"
                      @click="deleteColor(item)"
                    >删除</el-button>
                </el-checkbox>-->
                <el-checkbox-group v-model="form.color" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="item in color" :label="item" :key="item">
                    {{item}}
                    <el-button
                      type="text"
                      style="font-family:'微软雅黑';font-weight:400;color:#0099FF;"
                      @click="deleteColor(item)"
                    >删除</el-button>
                  </el-checkbox>
                </el-checkbox-group>
                <div>
                  <el-input v-model="addColor" width="100px" class="input-color"></el-input>
                  <el-button @click="addColor">增加</el-button>
                </div>
              </el-form-item>
            </div>
          </div>
          <!-- 表 -->
          <div>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="date" label="尺码" width="120" align="center"></el-table-column>
              <el-table-column prop="name" label="颜色" width="120" align="center"></el-table-column>
              <el-table-column prop="address" label="* 销售价格" width="170" align="center">
                <template scope="scope">
                  <img :src="scope.row.address" width="100" height="50" class="head_pic" />
                </template>
              </el-table-column>
              <el-table-column prop="x" label="* 商品库存" width="170" align="center">
                <template scope="scope">
                  <img :src="scope.row.x" width="100" height="50" class="head_pic" />
                </template>
              </el-table-column>
              <el-table-column prop="y" label="* 库存预警值" width="170" align="center">
                <template scope="scope">
                  <img :src="scope.row.y" width="100" height="50" class="head_pic" />
                </template>
              </el-table-column>
              <el-table-column prop="z" label="SKU编号" align="center" width="170">
                <template scope="scope">
                  <img :src="scope.row.z" width="100" height="50" class="head_pic" />
                </template>
              </el-table-column>
              <el-table-column prop label="操作" align="center" width="170">
                <template scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="handleClick(scope.$index, scope.row)"
                  >删除</el-button>
                  <el-button type="text" @click="dialoA= true" size="small">上传图片</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!--  -->

          <div class="goodsMessage-marginTop">
            <el-main class="info-main">
              <el-row type="flex" class="row-bg">
                <el-col :span="4">
                  <div class="grid-content bg-purple bg-color">*上市年份:</div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-select
                      v-model="formInline2.region"
                      placeholder="请选择"
                      class="select-width-3"
                      size="small"
                    >
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </div>
                </el-col>
              </el-row>
              <el-row type="flex" class="row-bg">
                <el-col :span="4">
                  <div class="grid-content bg-purple bg-color">*主材含量:</div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-input
                      v-model="formInline2.user1"
                      placeholder
                      class="select-width-3"
                      size="small"
                    ></el-input>
                  </div>
                </el-col>
              </el-row>
              <el-row type="flex" class="row-bg">
                <el-col :span="4">
                  <div class="grid-content bg-purple bg-color">适用对象:</div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-input
                      v-model="formInline2.user2"
                      placeholder
                      class="select-width-3"
                      size="small"
                    ></el-input>
                  </div>
                </el-col>
              </el-row>
            </el-main>
          </div>
          <!-- 图片 -->
          <div class="goodsMessage-marginTop">
            <!-- 一张图片 -->
            <div class="ximg-div">
              <div class="demo-image">
                <div class="block img-array" v-for="fit in fits" :key="fit">
                  <el-image style="width:140px; height:140px" :src="imgUrl" :fit="fit"></el-image>
                </div>
              </div>

              <div class="img-div-button">
                <el-button type="text" @click="shiftAlbum">商品主图</el-button>
                <el-button type="text">删除图片</el-button>
              </div>
            </div>
            <!-- 一张图片 -->
            <div class="ximg-div">
              <div class="demo-image">
                <div class="block img-array" v-for="fit in fits" :key="fit">
                  <el-image style="width:140px; height:140px" :src="imgUrl" :fit="fit"></el-image>
                </div>
              </div>

              <div class="img-div-button">
                <el-button type="text" @click="shiftAlbum">商品主图</el-button>
                <el-button type="text">删除图片</el-button>
              </div>
            </div>

            <!-- 一张图片 -->
            <div class="ximg-div">
              <div class="demo-image">
                <div class="block img-array" v-for="fit in fits" :key="fit">
                  <el-image style="width:140px; height:140px" :src="imgUrl" :fit="fit"></el-image>
                </div>
              </div>

              <div class="img-div-button">
                <el-button type="text" @click="shiftAlbum">商品主图</el-button>
                <el-button type="text">删除图片</el-button>
              </div>
            </div>

            <!-- 一张图片 -->
            <div class="ximg-div">
              <div class="demo-image">
                <div class="block img-array" v-for="fit in fits" :key="fit">
                  <el-image style="width:140px; height:140px" :src="imgUrl" :fit="fit"></el-image>
                </div>
              </div>

              <div class="img-div-button">
                <el-button type="text" @click="shiftAlbum">商品主图</el-button>
                <el-button type="text">删除图片</el-button>
              </div>
            </div>
            <!-- 一张图片 -->
            <div class="ximg-div">
              <div class="demo-image">
                <div class="block img-array" v-for="fit in fits" :key="fit">
                  <el-image style="width:140px; height:140px" :src="imgUrl" :fit="fit"></el-image>
                </div>
              </div>

              <div class="img-div-button">
                <el-button type="text" @click="shiftAlbum">商品主图</el-button>
                <el-button type="text">删除图片</el-button>
              </div>
            </div>
            <div class="goodsMessage-button">
              <el-button type="primary" @click="dialoA= true">上传图片</el-button>
              <el-button type="primary" @click="dialoB= true">从图片库选择</el-button>
              <span class="font-size11">按住ctrl可同时批量选择多张图片上传，最多可以上传5张图片，建议尺寸800*800px</span>
            </div>
          </div>

          <!-- 文本域 -->
          <div class="goodsMessage-marginTop">
            <div>
              <el-radio-group v-model="radio1">
                <el-radio-button label="电脑端详情"></el-radio-button>
                <el-radio-button label="移动端详情"></el-radio-button>
              </el-radio-group>
              <el-button type="text" class="marginleft-button" @click="dialoB= true">从图片库选择</el-button>
              <el-button type="text" @click="dialoC=true">移动端上传说明</el-button>
            </div>
            <editor-bar v-model="detail" :isClear="isClear" @change="change"></editor-bar>
          </div>
        </el-form>
      </div>
      <div>
        <el-button style="margin-top: 12px;" @click="last" v-show="active != 1">上一步,{{titleLast}}</el-button>
        <el-button
          style="margin-top: 12px;"
          type="primary"
          @click="next"
          v-show="active != 3"
        >下一步，{{titleNext}}</el-button>
        <el-button
          style="margin-top: 12px;"
          type="primary"
          @click="primary"
          v-show="active == 3"
        >提交审核</el-button>
      </div>
    </div>
    <!-- 对话框 -->
    <el-dialog title="上传图片" :visible.sync="dialoA" width="50%" :before-close="handleClose">
      <el-form :inline="true" :model="imgData" class="demo-form-inline">
        <el-form-item label="商品名称:">
          <el-input placeholder v-model="imgData.input" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="商品类型名称:">
          <el-input placeholder v-model="imgData.inputA" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="属性名称:">
          <el-input placeholder v-model="imgData.inputB" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="属性图片:">
          <el-upload
            class="upload-demo float-left margin-left-10"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="imgData.fileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">图库选择</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>

          <!--  -->
          <el-upload
            class="upload-demo float-left margin-left-10"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview1"
            :on-remove="handleRemove1"
            :file-list="imgData.fileList1"
            list-type="picture"
          >
            <el-button size="small" type="primary">选择上传文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="商品默认选择:">
          <el-radio v-model="imgData.radio" label="1">是</el-radio>
          <el-radio v-model="imgData.radio" label="2">否</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialoA = false">取 消</el-button>
        <el-button type="primary" @click="dialoA = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 对话框 -->
    <el-dialog title="从图库选择" :visible.sync="dialoB" width="50%" :before-close="handleCloseB">
      <div>
        <div class="float-left">全部图片</div>
        <div class="float-right">
          <el-select v-model="value" placeholder="请选择" size="small">
            <el-option
              v-for="item in optionsB"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>

      <div class="checkbox-top">
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="A">
            <!-- 一张图片 -->
            <div class="demo-image">
              <div class="block img-array" v-for="fit in fits" :key="fit">
                <el-image style="width:80px; height:80px" :src="imgUrl" :fit="fit"></el-image>
              </div>
            </div>
          </el-checkbox>
          <el-checkbox label="B">
            <!-- 一张图片 -->
            <div class="demo-image">
              <div class="block img-array" v-for="fit in fits" :key="fit">
                <el-image style="width:80px; height:80px" :src="imgUrl" :fit="fit"></el-image>
              </div>
            </div>
          </el-checkbox>
          <el-checkbox label="C">
            <!-- 一张图片 -->
            <div class="demo-image">
              <div class="block img-array" v-for="fit in fits" :key="fit">
                <el-image style="width:80px; height:80px" :src="imgUrl" :fit="fit"></el-image>
              </div>
            </div>
          </el-checkbox>
          <el-checkbox label="D">
            <!-- 一张图片 -->
            <div class="demo-image">
              <div class="block img-array" v-for="fit in fits" :key="fit">
                <el-image style="width:80px; height:80px" :src="imgUrl" :fit="fit"></el-image>
              </div>
            </div>
          </el-checkbox>
          <el-checkbox label="E">
            <!-- 一张图片 -->
            <div class="demo-image">
              <div class="block img-array" v-for="fit in fits" :key="fit">
                <el-image style="width:80px; height:80px" :src="imgUrl" :fit="fit"></el-image>
              </div>
            </div>
          </el-checkbox>

          <el-checkbox label="F">
            <!-- 一张图片 -->
            <div class="demo-image">
              <div class="block img-array" v-for="fit in fits" :key="fit">
                <el-image style="width:80px; height:80px" :src="imgUrl" :fit="fit"></el-image>
              </div>
            </div>
          </el-checkbox>
          <el-checkbox label="G">
            <!-- 一张图片 -->
            <div class="demo-image">
              <div class="block img-array" v-for="fit in fits" :key="fit">
                <el-image style="width:80px; height:80px" :src="imgUrl" :fit="fit"></el-image>
              </div>
            </div>
          </el-checkbox>
        </el-checkbox-group>
      </div>

      <div>
        <!-- 分页 -->
        <div class="goodMessage-page">
          <div class="block">
            <el-pagination layout="prev, pager, next" :total="1000"></el-pagination>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialoB = false">取 消</el-button>
        <el-button type="primary" @click="dialoB = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 对话框3 -->
    <el-dialog title="上传图片" :visible.sync="dialoC" width="50%" :before-close="handleClose">
      <span>
        <h4>一、基本要求</h4>
        <p>1、手机详情总体大小：图片+文字，图片不超过20张，文字不超过5000字；建议：所有图片都是本宝贝相关的图片。</p>

        <h4>二、图片大小</h4>

        <p>1、建议使用宽度480 ~ 620像素、高度小于等于960像素的图片；</p>
        <p>2、格式为：JPG\JEPG\GIF\PNG； 举例：可以上传一张宽度为480，高度为960像素，格式为JPG的图片。</p>
        <h4>三、文字要求</h4>
        <p>1、每次插入文字不能超过500个字，标点、特殊字符按照一个字计算；</p>
        <p>2、请手动输入文字，不要复制粘贴网页上的文字，防止出现乱码；</p>
        <p>3、以下特殊字符“>”、“"”、“'”、“\”会被替换为空。</p>
      </span>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialoC = false">取 消</el-button>
        <el-button type="primary" @click="dialoC = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import EditorBar from "@/components/wangEnduit";

export default {
  data() {
    return {
      active: 2,
      titleNext: "填写商品信息",
      titleLast: "选择商品分类",
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致"
                },
                {
                  value: "fankui",
                  label: "反馈"
                },
                {
                  value: "xiaolv",
                  label: "效率"
                },
                {
                  value: "kekong",
                  label: "可控"
                }
              ]
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                }
              ]
            }
          ]
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局"
                },
                {
                  value: "color",
                  label: "Color 色彩"
                },
                {
                  value: "typography",
                  label: "Typography 字体"
                },
                {
                  value: "icon",
                  label: "Icon 图标"
                },
                {
                  value: "button",
                  label: "Button 按钮"
                }
              ]
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框"
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框"
                },
                {
                  value: "input",
                  label: "Input 输入框"
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器"
                },
                {
                  value: "select",
                  label: "Select 选择器"
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器"
                },
                {
                  value: "switch",
                  label: "Switch 开关"
                },
                {
                  value: "slider",
                  label: "Slider 滑块"
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器"
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器"
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器"
                },
                {
                  value: "upload",
                  label: "Upload 上传"
                },
                {
                  value: "rate",
                  label: "Rate 评分"
                },
                {
                  value: "form",
                  label: "Form 表单"
                }
              ]
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格"
                },
                {
                  value: "tag",
                  label: "Tag 标签"
                },
                {
                  value: "progress",
                  label: "Progress 进度条"
                },
                {
                  value: "tree",
                  label: "Tree 树形控件"
                },
                {
                  value: "pagination",
                  label: "Pagination 分页"
                },
                {
                  value: "badge",
                  label: "Badge 标记"
                }
              ]
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告"
                },
                {
                  value: "loading",
                  label: "Loading 加载"
                },
                {
                  value: "message",
                  label: "Message 消息提示"
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框"
                },
                {
                  value: "notification",
                  label: "Notification 通知"
                }
              ]
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单"
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页"
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑"
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单"
                },
                {
                  value: "steps",
                  label: "Steps 步骤条"
                }
              ]
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框"
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示"
                },
                {
                  value: "popover",
                  label: "Popover 弹出框"
                },
                {
                  value: "card",
                  label: "Card 卡片"
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯"
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板"
                }
              ]
            }
          ]
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components"
            },
            {
              value: "sketch",
              label: "Sketch Templates"
            },
            {
              value: "jiaohu",
              label: "组件交互文档"
            }
          ]
        }
      ],
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        color: []
      },
      formInline: {
        user: "",
        region: ""
      },
      isClear: false,
      detail: "",
      addColor: "",
      checkAll: false,
      isIndeterminate: true,
      color: ["粉色", "黑色", "白色", "黄色"],
      // 第三块表格
      tableData: [
        {
          date: "M",
          name: "黑色",
          address: "",
          x: "",
          y: "",
          z: ""
        }
      ],
      // 第三块的第二表格
      formInline2: {
        region: "",
        user1: "",
        user2: ""
      },
      // 图片
      fits: ["fill"],
      // 图片地址手动添加
      imgUrl:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",

      //
      radio1: "电脑端详情",

      // 对话框
      dialoA: false,
      imgData: {
        input: "2018 iphoneXsMax128GB",
        inputA: "颜色",
        inputB: "黑色",
        // 图像选择
        fileList: [
          {
            name: "food.jpeg",
            url:
              "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          }
        ],
        fileList1: [
          {
            name: "food.jpeg",
            url:
              "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          }
        ],
        radio: "1"
      },

      // 对话框2
      dialoB: false,
      optionsB: [
        {
          value: "选项1",
          label: "黄金图库"
        },
        {
          value: "选项2",
          label: "白金图库"
        }
      ],

      checkList: ["A", "E"],

      // 对话框3
      dialoC: false
    };
  },
  components: { EditorBar },
  methods: {
    deleteColor(value) {
      console.log("我被点击了", value);
    },
    handleCheckedCitiesChange(value) {
      // let checkedCount = value.length;
      // this.checkAll = checkedCount === this.form.color.length;
      // this.isIndeterminate =
      //   checkedCount > 0 && checkedCount < this.form.color.length;
      // console.log(value);
    },
    addColor() {},
    change(val) {
      console.log(val);
    },
    primary() {},
    next() {
      this.active++;
    },
    last() {
      this.active--;
    }
  },
  // 上传图片
  handleClick() {},

  shiftAlbum() {
    console.log("商品主图");
    this.shiftForm = true;
  },
  // 对话框
  // 上传图片

  handleRemove(file, fileList) {
    console.log(file, fileList);
  },
  handlePreview(file) {
    console.log(file);
  },
  handleRemove1(file, fileList) {
    console.log(file, fileList);
  },
  handlePreview1(file) {
    console.log(file);
  },
  //
  handleClose(done) {
    this.$confirm("确认关闭？")
      .then(_ => {
        done();
      })
      .catch(_ => {});
  },
  // 对话框2/

  handleCloseB(done) {
    this.$confirm("确认关闭？")
      .then(_ => {
        done();
      })
      .catch(_ => {});
  },
  //监听器：监听active值的变化
  watch: {
    active: function(newValue, oldValue) {
      if (newValue == 1) {
        this.titleNext = "填写商品信息";
      }
      if (newValue == 2) {
        this.titleNext = "填写商品属性";
        this.titleLast = "这里是选择商品分类";
        console.log("..");
      }
      if (newValue == 3) {
        console.log("..");
        this.titleLast = "填写商品信息";
      }
    }
  }
};
</script>
<style scoped>
/* 图片选中 */

.checkbox-top {
  margin-top: 50px;
}

.goodMessage-page {
  float: right;
}
/*  */
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.margin-left-10 {
  margin-left: 10px;
}
.ximg-div {
  margin-top: 10px;
  width: 150px;
  display: inline-block;

  margin-left: 4%;
}
.img-div-button {
  width: 140px;
  margin: auto;
  height: 40px;
  background-color: rgb(240, 240, 240);
  text-align: center;
}
.font-size11 {
  font-size: 11px;
}
.goodsMessage-button {
  margin-top: 8px;
  padding-left: 70px;
}
.marginleft-button {
  margin-left: 10px;
}
/*第二模块  */

.addGoods-mokuai2 {
  padding-top: 30px;
  padding-left: 20px;
  background-color: #fff;
}
.addgoods-input-width {
  width: 500px;
}
/*  第三模块*/
.addGoods-mokuai3 {
  padding-top: 20px;
  padding-left: 20px;
}
/*  */
.goodsMessage-marginTop {
  margin-top: 20px;
}
.select-width-3 {
  width: 300px;
}
.addGoods-div-01 {
  width: 100%;
}
.addGoods-div-02 {
  float: left;
  width: 20%;
  margin-left: 5%;
  height: 650px;
  border: 1px solid beige;
  background-color: #fcfcfc;
  position: relative;
}
.addGoods-div-03 {
  float: left;
  width: 70%;
  height: 550px;
  background-color: #fff;
}
.el-cascader-panel.is-bordered {
  /* width: 1300px; */
}
.input-color {
  width: 150px;
}
.el-checkbox {
  /* margin: 10px; */
  margin-right: 10px;
}

.classify-icon {
  background: url("./../../../../assets/images/u2198.png") no-repeat;
  width: 200px;
  height: 50px;
  line-height: 50px;
  color: #fff;
  padding-left: 40px;
  position: absolute;
  top: 60px;
  right: -60px;
}
.classify-style {
  width: 600px !important;
  margin: 150px 70px;
}
</style>
